<template>
	<div class="basic-container">
		<div class="basic-params">
			<div class="content">
				<el-row>
					<el-col :span="14">
						<div class="header-title-text">
							<span>
								{{
									$t(
										'operation.activity_list.access_number_distribute'
									)
								}}
							</span>
						</div>
						<!-- totalData.deviceTypeGroup -->
						<div class="table">
							<div class="t-header">
								<div>
									{{
										$t(
											'operation.activity_list.access_number'
										)
									}}
								</div>
								<div
									v-for="(item, index) in totalData
										.deviceTypeGroup.length > 0 &&
										totalData.deviceTypeGroup"
									:key="index"
								>
									{{ filterActiveType(item.countType) }}
								</div>
								<!-- <div>WEB</div>
								<div>H5</div>
								<div>APP</div> -->
							</div>
							<div class="t-body">
								<div>
									{{ handelNum(totalData.deviceTypeGroup) }}
								</div>
								<div
									v-for="(item,
									index) in totalData.deviceTypeGroup"
									:key="index"
								>
									{{ item.value }}
								</div>
							</div>
							<div class="t-body">
								<div></div>
								<div
									v-for="(item, index) in totalData
										.deviceTypeGroup.length > 0 &&
										totalData.deviceTypeGroup"
									:key="index"
								>
									{{
										handelTotal(
											item.value,
											totalData.deviceTypeGroup
										)
									}}
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="10">
						<!-- totalData.userTypeGroup -->

						<div class="header-title-text">
							<span>
								{{ $t('operation.activity_list.distribute') }}
							</span>
						</div>
						<div class="table">
							<div class="t-header">
								<div style="width: 33.333%;">
									{{
										$t(
											'operation.activity_list.access_number'
										)
									}}
								</div>
								<div style="width: 33.333%;">
									{{ $t('operation.activity_list.accesser') }}
								</div>
								<div style="width: 33.333%;">
									{{ $t('operation.activity_list.user1') }}
								</div>
							</div>
							<div class="tb-w t-body">
								<div style="width: 33.333%;">
									{{ handelNum(totalData.userTypeGroup) }}
								</div>
								<div style="width: 33.333%;">
									{{
										(totalData.userTypeGroup[0] &&
											totalData.userTypeGroup[0].value) ||
											0
									}}
								</div>
								<div style="width: 33.333%;">
									{{
										(totalData.userTypeGroup[1] &&
											totalData.userTypeGroup[1].value) ||
											0
									}}
								</div>
							</div>
							<div class="t-body">
								<div style="width: 33.333%;"></div>
								<div style="width: 33.333%;">
									{{
										handelTotal(
											totalData.userTypeGroup[0] &&
												totalData.userTypeGroup[0]
													.value,
											totalData.userTypeGroup
										) || 0
									}}
								</div>
								<div style="width: 33.333%;">
									{{
										handelTotal(
											totalData.userTypeGroup[1] &&
												totalData.userTypeGroup[1]
													.value,
											totalData.userTypeGroup
										) || 0
									}}
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<div class="header-title-text" style="margin:35px 0">
							<span>
								{{
									$t('operation.activity_list.filter_people')
								}}
							</span>
						</div>
						<!-- totalData.vipGroup -->
						<div class="table">
							<div class="t-header">
								<div
									style="width: 10%;"
									:title="
										$t(
											'operation.activity_list.access_filter_people'
										)
									"
								>
									{{
										$t(
											'operation.activity_list.access_filter_people'
										)
									}}
								</div>
								<div
									v-for="(item, index) in totalData.vipGroup
										.length > 0 && totalData.vipGroup"
									:key="index"
									style="width: 10%;"
								>
									VIP{{ item.countType }}
								</div>
							</div>
							<div class="tb-w t-body">
								<div style="width: 10%;">
									{{ handelNum(totalData.vipGroup) }}
								</div>
								<div
									v-for="(item, index) in totalData.vipGroup
										.length > 0 && totalData.vipGroup"
									:key="index"
									style="width: 10%;"
								>
									{{ item.value }}
								</div>
							</div>
							<div class="t-body">
								<div style="width: 10%;"></div>
								<div
									v-for="(item, index) in totalData.vipGroup
										.length > 0 && totalData.vipGroup"
									:key="index"
								>
									{{
										handelTotal(
											item.value,
											totalData.vipGroup
										)
									}}
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
const startTime = dayjs()
	.startOf('day')
	.valueOf()
const endTime = dayjs()
	.endOf('day')
	.valueOf()
export default {
	name: 'Statistics',
	mixins: [list],
	props: {
		totalData: {
			type: Object,
			default: () => {},
			require: true
		}
	},
	data() {
		return {
			queryData: {
				queryData: [startTime, endTime]
			}
		}
	},
	watch: {
		// totalData: {
		// 	handler(val) {
		// 		if (val) {
		// 		}
		// 	},
		// 	deep: true,
		// 	immediate: true
		// }
	},
	mounted() {},
	methods: {
		handelTotal(val, arrValue) {
			if (!val || !arrValue) return 0
			const arr =
				(arrValue?.length > 0 && arrValue.map((va) => va.value)) || []
			if (arr.length <= 0) return
			const res = arr.reduce(function(accumulator, currentValue) {
				return accumulator + currentValue
			})
			return ((val / res) * 100).toFixed(2) + '%' || 0
		},
		handelNum(num) {
			if (!num) return 0
			const arr = (num?.length > 0 && num.map((va) => va.value)) || []
			if (arr.length <= 0) return
			const res = arr.reduce(function(accumulator, currentValue) {
				return accumulator + currentValue
			})
			return res || 0
		},
		filterActiveType(value) {
			return {
				1: 'PC',
				2: 'IOS_APP',
				3: 'IOS_H5',
				4: 'Android_H5',
				5: 'Android_APP',
				6: this.$t('operation.activity_list.backend')
			}[value]
		},
		search() {},
		reset() {}
	}
}
</script>

<style lang="scss" scoped>
.header-title-text {
	font-size: 14px;
	margin-bottom: 15px;
}
.table {
	margin: 20px 150px 0px 0px;
	border: 1px solid #0000006e;
	border-bottom: 0;
	border-right: 0;
	width: fit-content;

	.t-header {
		display: flex;
		display: flex;
		background: #d7d7d4;
		div {
			// autoWidh
			.tH-w {
				width: 33.333%;
			}
			// width: 25%;
			text-align: center;
			min-width: 100px;
			border: 1px solid #0000006e;
			border-left: 0;
			border-top: 0;
			height: 45px;
			line-height: 45px;
		}
	}
	.t-body {
		display: flex;
		div {
			// width: 25%;
			text-align: center;
			min-width: 100px;
			border: 1px solid #0000006e;
			border-left: 0;
			border-top: 0;
			height: 45px;
			line-height: 45px;
		}
	}
}

.vi_VN,
.en_US,
.th_TH {
	.table .t-header div,
	.t-body div {
		min-width: 120px;
		overflow: hidden;
	}
}
</style>
